<template>
    <div>
        <van-nav-bar title="帖子详情" left-text="主页" left-arrow @click-left="$router.push('/home/home')" fixed />

        <div class="block"></div>
        <div class="text" :max-count="1">
            <div class="post" v-for="(item, index) in postSource.postMessage">
                <h1>{{ item.title }}</h1>
                <p>{{ item.content }}</p>
            </div>
            <div class="comment" v-for="(item, index) in postSource.postComment">
                <h2>{{ item.user_id }}</h2>
                <p> {{ item.content }}</p>
            </div>
        </div>
    </div>
</template>

<script setup>
// 导入依赖
import { POST, GET } from "../../tools/fetch";
import { postApi, baseURL } from '../../tools/api.js';
// 路由相关的，允许你用js控制路由，跳转组件一点就的走，但是此时控制了，不是直接点了就跳转，需要js控制允许控制转向其他路由
//  控制路由（走的时候）访问路由（来的时候）
// import {useRouter,useRoute} from 'vue-router';
import { FloatingBubble } from 'vant';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
import { ref } from 'vue';
// token
import { useUserStore } from '../../tools/storage.js';
// 初始化
const userStore = useUserStore();
const route = useRoute();
const URL = baseURL;

/*--------------------------------------*/

//获得帖子id
const id = route.query.id;


//存储帖子
const postSource = ref({
    postMessage: [],
    postComment: []
})

// 页面加载时调用
const onLoad = async () => {
    const resResult = await GET({
        api: postApi.getPost,
        data: {
            post_id: route.query.id
        }
    })
    console.log(resResult);
    postSource.value.postMessage = resResult.data.postMessage
    postSource.value.postComment = resResult.data.postComment
}
onLoad()

</script>

<style lang="less" scoped>
.block {
    height: 7vh;
}
</style>